<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				// scroll 滚动监听
				$(window).scroll(function(){
					console.info("移动距离:",$(this).scrollTop())
					if($(this).scrollTop()>=534){
						$("#menu").addClass("navbar-fixed-top");
					}else{
						$("#menu").removeClass("navbar-fixed-top");
					}
				})
			})
		</script>
	</head>
	<body>
		
		<div id="carousel-example-generic" class="carousel slide" style="width: 80%;margin: 0px auto;">
			
			 <!-- Indicators 远点 -->
			  <ol class="carousel-indicators">
			    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="1" ></li>
			  </ol>
			<!--滚动内容-->
			<div class="carousel-inner">
				<div class="item active">
					<img src="img/a.jpg"/>
					<div class="carousel-caption">
			         	这是描述文字
			      	</div>
				</div>
				<div class="item">
					<img src="img/b.jpg"/>
				</div>
			</div>
			<!--左右箭头-->
			<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			  </a>
			  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			  </a>
		</div>
		
		<div id="menu" class="container-fluid">
			<div class="container navbar-inverse">
				<ul class="nav nav-tabs">
					<li><a href="#">AAA</a></li>
					<li><a href="#">AAA</a></li>
					<li><a href="#">AAA</a></li>
					<li><a href="#">AAA</a></li>
				</ul>
			</div>
		</div>
		
		<div id="div1" style="height: 500px;background: #000;"></div>
		<div id="div2" style="height: 500px;background: #F00;"></div>
		<div id="div3" style="height: 500px;background: #0F0;"></div>
		<div id="div4" style="height: 500px;background: #00F;"></div>
		<div id="div5" style="height: 500px;background: #FF0;"></div>
		<div id="div6" style="height: 500px;background: #0FF;"></div>
	</body>
</html>
